<!-- 通过订单导入弹窗 -->

<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <a-form
        ref="form2"
        :model="storeMaterialModalApp.storeMaterial"
        :rules="storeMaterialModalApp.rules"
        :label-col="{md: {span: 7}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 12}, sm: {span: 24}}">
        <a-row :gutter="16">

          <a-col :lg="14" :md="12" :sm="24" :xs="24">
            <a-form-item label="原材料名称" name="name">
              <m-entity-select
                v-model:value="storeMaterialModalApp.storeMaterial.name"
                placeholder="请选择原材料"
                module="material"
                entity="Material"
                show-options-name="name"
                class="ele-fluid" @getEntityMaterialSelect="getEntityMaterialSelect"
              />
            </a-form-item>
          </a-col>


          <a-col :lg="10" :md="12" :sm="24" :xs="24">
            <a-form-item label="数量" name="quantity">
              <a-input-number
                v-model:value="storeMaterialModalApp.storeMaterial.quantity"
                placeholder="请输入数量"
                :min="0"
                :step="0.5"
                class="ele-fluid importanceI"></a-input-number>
            </a-form-item>
          </a-col>
          <!--          <a-col :lg="6" :md="12" :sm="24" :xs="24">-->
          <!--            <a-form-item label="操作:" name="operation">-->
          <!--              <a-select default-value='领用' style="width: 120px" @change="handleChange"-->
          <!--                        v-model:value="operation">-->
          <!--                <a-select-option value='2'>-->
          <!--                  领用-->
          <!--                </a-select-option>-->
          <!--                <a-select-option value='0'>-->
          <!--                  退库-->
          <!--                </a-select-option>-->
          <!--              </a-select>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <a-row :gutter="16">
            <a-col :md="12" :sm="24" :xs="24">
              <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
                <!--class="ele-pull-right"-->
                <div>
                  <teleport to="#storeMaterialOutgoingModalFooter">
                    <div>
                      <a-space size="middle">
                        <a-button @click="storeMaterialListApp.outgoingShowing=false">取消
                        </a-button>
                        <a-button
                          type="primary"
                          @click="onSubmit(storeMaterialModalApp.storeMaterial,operation)"
                          :loading="loading">提交
                        </a-button>
                      </a-space>
                    </div>
                  </teleport>
                </div>
                <div v-if="!storeMaterialModalApp.display">
                  <a-space size="middle">
                    <a-button @click="storeMaterialListApp.outgoingShowing=false">取消</a-button>
                    <a-button
                      type="primary"
                      @click="onSubmit(storeMaterialModalApp.storeMaterial,operation)"
                      :loading="loading">提交
                    </a-button>
                    <!--<a-button v-if="!eid"
                              type="dashed"
                              @click="continueSubmit"
                              :loading="loading">继续提交
                    </a-button>-->
                  </a-space>
                </div>

              </a-form-item>
            </a-col>
          </a-row>

        </a-row>
      </a-form>
    </a-card>

  </div>

</template>

<script>
import {defineComponent, reactive, inject, onMounted, ref} from 'vue';
import {useRoute, useRouter} from "vue-router"
import {StoreMaterialService} from "@/views/restaurant/material/storeMaterial/storeMaterialService";
import {VXETable} from 'vxe-table'
import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';
import MEntitySelect from "@/components/MEntity/entitySelect";

const plainOptions = ['Apple', 'Pear', 'Orange'];

export default defineComponent({
  components: {MEntitySelect},
  props: {
    defaultOperation: String
  },
  emits:['editClose'],
  setup(props,{emit}) {
    // console.log(props.defaultOperation)
    // 省市区数据
    const form2 = ref(null);
    const cityData = regions
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    let routeId = route.params.id;
    let operation = ref(null);
    let storeMaterialListApp = inject('storeMaterialListApp', reactive({}));
    //获取到待入库的订单信息

    const storeMaterialModalApp = reactive({
      id: null,
      storeMaterial: {},
      isEdit: false,
      display: false
    });

    storeMaterialModalApp.rules = {
      materialName: [
        {
          required: true,
          type: 'string',
          message: '请输入材料名称',
          trigger: 'blur'
        }
      ],
      quantity: [
        {
          required: true,
          type: 'number',
          message: '请输入数量',
          trigger: 'blur'
        }
      ],
      price: [
        {
          required: true,
          type: 'number',
          message: '请输入价格',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      storeMaterialModalApp.storeMaterial = reactive({});
      if (routeId) {//路由
        storeMaterialModalApp.id = routeId;
        storeMaterialModalApp.display = false;
        findStoreMaterial(storeMaterialModalApp.id);
      } else if (storeMaterialListApp.outgoingShowing) {
        console.log("yes")
        storeMaterialModalApp.id = storeMaterialListApp.currentId;
        storeMaterialModalApp.display = true;
      }
      if (storeMaterialModalApp.id) findStoreMaterial(storeMaterialModalApp.id);
      operation.value = props.defaultOperation;
    });

    const handleChange = (val) => {
      operation.value = val
    }
    const findStoreMaterial = (id) => {
      StoreMaterialService.findStoreMaterialForView(id).then((res) => {
        console.log(res)
        storeMaterialModalApp.storeMaterial = res.data;
        storeMaterialModalApp.storeMaterial.quantity = null;
        //TODO:为编辑准备.
        storeMaterialModalApp.title = "编辑材料 " + storeMaterialModalApp.storeMaterial.name;
      }).catch(error => {
        VXETable.modal.message({content: `查找材料出错，原因是：${error.message}`, status: 'error'});
      })
    }
    const getEntityMaterialSelect = (data) => {
      storeMaterialModalApp.storeMaterial.materialId = data.eid
      storeMaterialModalApp.storeMaterial.name = data.name
    }
    /*TODO:提交 新增&编辑*/
    const onSubmit = (data, operation) => {
      console.log(data)
      form2.value.validate().then(()=>{
        if (data.eid) {
          //修改
          StoreMaterialService.updateStoreMaterial(operation, data).then((res) => {
            console.log(res)
            storeMaterialListApp.outgoingShowing = false;
            emit('editClose',true);
            if (res.data.quantity==0){
              VXETable.modal.message({content: `${res.data.name}库存不足，请及时补充库存！`, status: 'warning'});
              return
            }
            VXETable.modal.message({content: '操作成功', status: 'success'});
            setTimeout(onBack, 3000);
          }).catch(error => {
            VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
          })
        }
      })
      // debugger;
      //当为数组时用逗号连接

    }

    /*TODO:继续提交*/
    const continueSubmit = () => {
      VXETable.modal.message({content: 'error 提示', status: 'error'});
    }

    /*TODO:返回列表*/
    const onBack = () => {
      storeMaterialModalApp.storeMaterial = reactive({});
      router.push(`/restaurant/material/storeMaterial`);
      store.dispatch('user/tabRemove', route.fullPath);

    }
    return {
      cityData,
      operation,
      routeId,
      form2,
      storeMaterialListApp,
      storeMaterialModalApp,
      getEntityMaterialSelect,
      handleChange,
      plainOptions,
      onSubmit,
      continueSubmit,
      onBack,
    }

  },
})
</script>

<style scoped>

</style>
